<template>
  <div v-loading="loading" class="main_body">
    <div class="content">
      <el-card v-for="item in list" :key="item.vod_id" class="movie-item" >
        <div @click="test(item)">
          {{ item.vod_name }}
        </div>
      </el-card>
      <el-pagination
        style="margin-top:20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="25"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <detail-dialog ref="detailDialog"></detail-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getMovieByType } from "@/api/movie";
import DetailDialog from "@/components/Dialog/DetailDialog";

export default {
  name: "Dashboard",
  components: {
    DetailDialog
  },
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      loading: false,
      visible: false,
      list: [],
      currentPage: 1,
      total: 0
    };
  },
  mounted() {
    this.initMovie(this.$route.meta.type_id, 1);
  },
  methods: {
    test(data) {
      this.$refs.detailDialog.init(data)
    },
    initMovie(id, pg) {
      this.loading = true;
      getMovieByType(id, pg)
        .then((res) => {
          this.loading = false;
          this.list = res.list;
          this.total = res.total
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.initMovie(this.$route.meta.type_id, val)
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.main_body {
  // width: calc(100vw - 20px);
  // height: calc(100vh - 80px);

  overflow: auto;

  .content {
    min-height: 800px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px 20px 20px 20px;
    background: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: auto;
    padding: 20px 0px 0px 0px;
  }

  .movie-item {
    min-width: 300px;
    margin: 10px;
  }
}
</style>
